4. actionCreator与constants（actionTypes）的使用

在common/header/store下创建actionCreator

// 创建action的地方
import * as constants from './constants'

export const searchFocus = () => ({
	type: constants.SEARCH_FOCUS
});

在common/header/store下创建constants

// 一个创建变量映射的地方，相当于actionTypes，只是名称不同而已
export const SEARCH_FOCUS = 'header/SEARCH_FOCUS';

代码优化，common/header/store/index下导出actionCreator和constants

import reducer from './reducer';
import * as actionCreator from './actionCreator'
import * as constants from './constants'

export { reducer, actionCreator, constants}

点击Aa实现文件的变化的实现，common/header/index中

<NavItem className='right' onClick={ props.clickSearchFocus }> Aa { props.inputValue } </NavItem>

const mapStateToProps = (state) => {
	return {
		inputValue: state.header.inputValue // 这里使用的是header下的reducer中的inputValue，也就是子reducer，所以写为state.header.inputValue
	}
}

const mapDispathToProps = (dispatch) => {
	return {
		clickSearchFocus(){
			dispatch(actionCreator.searchFocus())
		}
	}
}

代码目录

效果

代码地址